<template>
  <div class="global-page">
    <div class="params-wrap">
      <el-button type="primary" @click="addArticle">添加文章</el-button>
    </div>
    <EffectPage
      ref="EffectPageDom"
      :use-card-style="true"
      fieldset-id="1"
      :request="getTableList"
    >
      <template v-slot:content="{ data, fields, loading }">
          <Table
            ref="multipleTable"
            v-loading="loading"
            tooltip-effect="dark"
            style="width: 100%"
            :max-height="maxTableHeight"
            border
            :header-cell-style="{ background: '#FAFAFA' }"
            element-loading-background="rgb(fff,fff,fff)"
            element-loading-text="加载中，请稍等"
            element-loading-spinner="el-icon-loading"
            strip
            :data="data"
            @selection-change="handleSelectionChange"
            @sort-change="sortTable"
          >
            <TableColumn type="selection" width="40" />
            <RenderColumns :column-configs="fields" />
          </Table>
      </template>
    </EffectPage>
  </div>
</template>
<script>
import { Table,TableColumn } from 'element-ui'
import RenderColumns from 'ui/RenderColumns'
import EffectPage from 'ui/EffectPage'
import articleApi from '@/api/article/index';
import MaxTableHeightMixin from '@/mixins/max-table-height.mixin'
export default {
  data(){
    return {
      order:'',
      sort:''
    }
  },
  components:{
    Table,
    TableColumn,
    RenderColumns,
    EffectPage
  },
  mixins:[MaxTableHeightMixin],
  methods: {
    handleSelectionChange(){
      console.log('ArticleList.vue - handleSelectionChange')
    },
    sortTable(column){
      console.log('ArticleList.vue - sortTable')
    },
    // 获取列表数据
    getTableList:function(_params) {
      _params = {
        page:1,
        size:20
      }
      return articleApi.getArticleList(_params).then(res => {
        return res
      })
    },
    handleAfterRequest(res){
      console.log(res)
    },
    addArticle(){
      this.$router.push({path:'/article/EditArticle'})
    }
  }
}
</script>
<style lang="less" scoped>
.params-wrap{
  width:100%;
  height:60px;
  padding:0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /deep/ .el-button{
    align-self:flex-end;
  }
}
</style>